<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 校园生活助手系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #165DFF;
            --secondary-color: #0A2463;
            --accent-color: #3E92CC;
            --text-color: #333;
            --text-light: #666;
            --bg-color: #F8F9FA;
            --card-bg: #fff;
            --border-radius: 12px;
            --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(22, 93, 255, 0.05), rgba(62, 146, 204, 0.05));
            z-index: -1;
        }
        
        .login-container {
            display: flex;
            width: 900px;
            max-width: 90%;
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .login-banner {
            flex: 1;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .login-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
            transform: rotate(45deg);
        }
        
        .login-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }
        
        .login-banner p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
        }
        
        .feature-list {
            position: relative;
            z-index: 1;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 1.2rem;
        }
        
        .feature-item i {
            font-size: 1.2rem;
            margin-right: 1rem;
            margin-top: 0.2rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .feature-item span {
            opacity: 0.9;
        }
        
        .login-form-section {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        
        .logo {
            display: inline-block;
            margin-bottom: 1.5rem;
        }
        
        .logo img {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }
        
        .login-header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        
        .login-header p {
            color: var(--text-light);
            font-size: 0.95rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--text-color);
            font-size: 0.95rem;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
            background-color: #fff;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }
        
        .form-control::placeholder {
            color: #A0AEC0;
        }
        
        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #A0AEC0;
            font-size: 1rem;
            z-index: 1;
        }
        
        .input-with-icon .form-control {
            padding-left: 45px;
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #A0AEC0;
            font-size: 1.1rem;
            z-index: 1;
            transition: var(--transition);
        }
        
        .password-toggle:hover {
            color: var(--primary-color);
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .remember-me input[type="checkbox"] {
            margin-right: 0.5rem;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .remember-me label {
            font-size: 0.9rem;
            color: var(--text-light);
            cursor: pointer;
            user-select: none;
        }
        
        .forgot-password {
            margin-left: auto;
            font-size: 0.9rem;
        }
        
        .forgot-password a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }
        
        .forgot-password a:hover {
            text-decoration: underline;
            color: var(--secondary-color);
        }
        
        .btn-login {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn-login:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
        }
        
        .btn-login:active {
            transform: translateY(0);
        }
        
        .btn-login::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.5s ease;
        }
        
        .btn-login:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .alternative-login {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        .alternative-login p {
            position: relative;
            display: inline-block;
            margin: 0;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        .alternative-login p::before,
        .alternative-login p::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 80px;
            height: 1px;
            background-color: #E5E7EB;
        }
        
        .alternative-login p::before {
            right: 100%;
            margin-right: 15px;
        }
        
        .alternative-login p::after {
            left: 100%;
            margin-left: 15px;
        }
        
        .social-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border: 1px solid #E5E7EB;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.1rem;
            color: var(--text-color);
        }
        
        .social-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
        }
        
        .register-link {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-light);
        }
        
        .register-link a {
            color: var(--primary-color);
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .register-link a:hover {
            text-decoration: underline;
            color: var(--secondary-color);
        }
        
        .error-message {
            background-color: #FEE2E2;
            color: #B91C1C;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .error-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .error-message i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
                max-width: 100%;
                margin: 20px;
            }
            
            .login-banner {
                padding: 30px 20px;
                text-align: center;
            }
            
            .login-banner h2 {
                font-size: 2rem;
            }
            
            .feature-item {
                justify-content: center;
            }
            
            .login-form-section {
                padding: 30px 20px;
            }
            
            .alternative-login p::before,
            .alternative-login p::after {
                width: 40px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                align-items: flex-start;
                padding-top: 20px;
                height: auto;
                min-height: 100vh;
            }
            
            .login-banner h2 {
                font-size: 1.8rem;
            }
            
            .login-banner p {
                font-size: 1rem;
            }
            
            .login-header h1 {
                font-size: 1.6rem;
            }
            
            .remember-me {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .forgot-password {
                margin-left: 0;
                margin-top: 0.5rem;
            }
            
            .alternative-login p::before,
            .alternative-login p::after {
                width: 20px;
            }
        }
        
        /* 加载动画 */
        .loader {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-left: 8px;
            vertical-align: middle;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .btn-login.loading .btn-text {
            visibility: hidden;
        }
        
        .btn-login.loading .loader {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <!-- 左侧横幅 -->
        <div class="login-banner">
            <h2>校园生活助手</h2>
            <p>一站式管理学习与生活，让校园生活更便捷、更智能</p>
            <div class="feature-list">
                <div class="feature-item">
                    <i class="fa fa-calendar-check"></i>
                    <span>智能课程管理与出勤跟踪</span>
                </div>
                <div class="feature-item">
                    <i class="fa fa-book"></i>
                    <span>在线学习资料与作业提交</span>
                </div>
                <div class="feature-item">
                    <i class="fa fa-comments"></i>
                    <span>师生互动与校园社区交流</span>
                </div>
                <div class="feature-item">
                    <i class="fa fa-bar-chart"></i>
                    <span>学习成绩与进度分析</span>
                </div>
            </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="login-form-section">
            <div class="login-header">
                <div class="logo">
                    <i class="fa fa-graduation-cap" style="font-size: 3.5rem; color: var(--primary-color);"></i>
                </div>
                <h1>欢迎回来</h1>
                <p>请登录您的账号继续使用</p>
            </div>
            
            <!-- 消息提示区域 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <!-- 错误消息区域 -->
            <div class="error-message" id="error-message" style="display: none;">
                <i class="fa fa-exclamation-circle"></i>
                <span id="error-text">用户名或密码错误，请重新输入</span>
            </div>
            
            <!-- 登录表单 -->
            <form method="POST" action="{{ url_for('login') }}" id="login-form">
                {{ form.hidden_tag() }}
                
                <div class="form-group input-with-icon">
                    <label for="username" class="form-label">用户名/学号/工号</label>
                    <i class="fa fa-user input-icon"></i>
                    {{ form.username(class="form-control", placeholder="请输入用户名", required=True) }}
                    {% if form.username.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.username.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group input-with-icon">
                    <label for="password" class="form-label">密码</label>
                    <i class="fa fa-lock input-icon"></i>
                    {{ form.password(class="form-control", placeholder="请输入密码", required=True) }}
                    <i class="fa fa-eye-slash password-toggle" id="toggle-password"></i>
                    {% if form.password.errors %}
                        <div class="text-danger mt-1">
                            {% for error in form.password.errors %}
                                <small>{{ error }}</small>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <div class="remember-me">
                    {{ form.remember_me(class="form-check-input") }}
                    <label for="remember_me">记住我</label>
                    <div class="forgot-password">
                        <a href="{{ url_for('forgot_password') }}">忘记密码？</a>
                    </div>
                </div>
                
                <button type="submit" class="btn-login" id="login-button">
                    <span class="btn-text">登录</span>
                    <div class="loader" style="display: none;"></div>
                </button>
            </form>
            
            <div class="alternative-login">
                <p>或使用以下方式登录</p>
            </div>
            
            <div class="social-buttons">
                <button class="social-btn" id="wechat-login">
                    <i class="fa fa-weixin"></i>
                </button>
                <button class="social-btn" id="qq-login">
                    <i class="fa fa-qq"></i>
                </button>
                <button class="social-btn" id="school-login">
                    <i class="fa fa-university"></i>
                </button>
            </div>
            
            <div class="register-link">
                还没有账号？ <a href="{{ url_for('register') }}" id="register-link">立即注册</a>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 密码显示/隐藏切换
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
            });
            
            // 登录表单提交
            const loginForm = document.getElementById('login-form');
            const loginButton = document.getElementById('login-button');
            const errorMessage = document.getElementById('error-message');
            
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const username = document.getElementById('username').value.trim();
                const password = passwordInput.value;
                const remember = document.getElementById('remember_me').checked;
                
                // 简单的表单验证
                if (!username || !password) {
                    showError('请输入用户名和密码');
                    return;
                }
                
                // 显示加载状态
                loginButton.classList.add('loading');
                
                // 使用fetch API提交表单
                fetch("{{ url_for('login') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams(new FormData(loginForm))
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误');
                    }
                    return response.text();
                })
                .then(data => {
                    // 登录成功后，页面会自动跳转
                    window.location.reload();
                })
                .catch(error => {
                    console.error('登录错误:', error);
                    // 登录失败，显示错误信息
                    showError('用户名或密码错误，请重新输入');
                    
                    // 重置加载状态
                    loginButton.classList.remove('loading');
                });
            });
            
            // 社交登录按钮点击事件
            const wechatLogin = document.getElementById('wechat-login');
            const qqLogin = document.getElementById('qq-login');
            const schoolLogin = document.getElementById('school-login');
            
            wechatLogin.addEventListener('click', function() {
                alert('即将跳转到微信登录页面！实际项目中会调用微信授权API');
            });
            
            qqLogin.addEventListener('click', function() {
                alert('即将跳转到QQ登录页面！实际项目中会调用QQ授权API');
            });
            
            schoolLogin.addEventListener('click', function() {
                alert('即将跳转到学校统一认证登录页面！实际项目中会跳转到学校SSO系统');
            });
            
            // 显示错误消息的函数
            function showError(message) {
                document.getElementById('error-text').textContent = message;
                errorMessage.style.display = 'flex';
                errorMessage.style.opacity = '1';
                errorMessage.style.transform = 'translateY(0)';
                
                // 添加抖动动画
                errorMessage.style.animation = 'none';
                errorMessage.offsetHeight; // 触发重排
                errorMessage.style.animation = 'shake 0.5s ease-in-out';
                
                // 3秒后自动隐藏错误消息
                setTimeout(function() {
                    errorMessage.style.opacity = '0';
                    errorMessage.style.transform = 'translateY(-10px)';
                    setTimeout(() => {
                        errorMessage.style.display = 'none';
                    }, 300);
                }, 5000);
            }
            
            // 添加输入框聚焦时隐藏错误消息
            const formInputs = document.querySelectorAll('input');
            formInputs.forEach(input => {
                input.addEventListener('focus', function() {
                    if (errorMessage.style.display === 'flex') {
                        errorMessage.style.opacity = '0';
                        errorMessage.style.transform = 'translateY(-10px)';
                        setTimeout(() => {
                            errorMessage.style.display = 'none';
                        }, 300);
                    }
                });
            });
            
            // 添加自定义抖动动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes shake {
                    0%, 100% { transform: translateX(0); }
                    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
                    20%, 40%, 60%, 80% { transform: translateX(5px); }
                }
            `;
            document.head.appendChild(style);
            
            // 添加页面载入动画效果
            document.body.style.opacity = '0';
            setTimeout(function() {
                document.body.style.transition = 'opacity 0.5s ease';
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>